@font-face {
  font-family: "Rocher";
  src: url(./3b03a24c.50xym2.woff2);
}

.highlighter {
  font-family: "Rocher" monospace;
}
h4 {
  font-family: "Rocher";
  font-size: 50px;
}

@font-palette-values --grays {
  font-family: Rocher;
  base-palette: 9;
}
@font-palette-values --Purples {
  font-family: Rocher;
  base-palette: 6;
}

@font-palette-values --Mint {
  font-family: Rocher;
  base-palette: 7;
}
.grays {
  font-palette: --grays;
}
.purples {
  font-palette: --Purples;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  padding: 0 10px;
}
h3 {
  text-align: center;
}
.edit {
  display: block;
  font-size: 20px;
  box-sizing: border-box;
  border: 0;
  width: 1000px;
  max-width: 100%;
  min-height: 400px;
  field-sizing: content;
  background-color: #000;
  color: #f1f1f1;
  padding: 1rem;
  border: 2px solid #1d1d1d;
  border-radius: 0.5rem;
  margin: 0 auto;
}

// @font-palette-values --myCustomPalette {
//   font-family: "FontWithASyntaxHighlighter";
//   override-colors: 0 hsl(225 100% 40%), /* keywords, {} */ 1 #ccc,
//     /* comments */ 2 yellow, /* literals */ 3 hsl(327 100% 54%),
//     /* numbers */ 4 hsl(225 100% 40%), /* functions, [] */ 5 purple,
//     /* js others */ 6 black, /* not in use */ 7 orange,
//     /* inside quotes, css properties, few chars */ 8 hotpink /* few chars */;
// }
